<template>
  <view :class="['flex flex-row', `px-${props.margin[0]}`, `pb-${props.margin[1]}`]">
    <tm-sheet
      :margin="[0, 0]"
      :padding="[24, 24]"
      paren-class="flex-1"
      class="flex-1"
      :color="_disable ? _disableBgColor : props.color"
      :_style="props._style"
      :follow-theme="props.followTheme"
      :dark="props.dark"
      :round="props.round"
      :shadow="props.shadow"
      :outlined="props.outlined"
      :border="props.border"
      :border-style="props.borderStyle"
      :border-direction="props.borderDirection"
      :text="props.text"
      :transprent="props.transprent"
      :linear="props.linear"
      :linear-deep="props.linearDeep"
      _class="flex flex-row flex-between flex-row-start-start"
    >
      <view v-if="props.showRight" class="pr-24 flex flex-col">
        <slot name="thumb">
          <tm-avatar v-if="_thumb" :size="80" :round="24" :img="_thumb"></tm-avatar>
          <view v-if="!_thumb" class="flex flex-col">
            <view class="flex-row flex flex-row-bottom-center">
              <tm-text
                :follow-dark="true"
                :user-interaction-enabled="false"
                :color="_disable ? _disableColor : props.mainColor"
                :font-size="22"
                :label="_priceDetail.prefix"
              ></tm-text>
              <tm-text
                :user-interaction-enabled="false"
                :color="_disable ? _disableColor : props.mainColor"
                _class="px-10 text-weight-b"
                :font-size="42"
                :label="_priceDetail.price"
              ></tm-text>
              <tm-text
                :follow-dark="true"
                :user-interaction-enabled="false"
                :color="_disable ? _disableColor : props.mainColor"
                :font-size="22"
                :label="_priceDetail.suffix"
              ></tm-text>
            </view>
            <view class="flex flex-center">
              <tm-text
                :user-interaction-enabled="false"
                :color="_disable ? _disableColor : _fontColor"
                _class="pr-10 opacity-7"
                :font-size="22"
                :label="_priceDetail.subtext"
              ></tm-text>
            </view>
          </view>
        </slot>
      </view>
      <view class="flex-1 flex flex-col" style="width: 0px">
        <view class="flex flex-row flex-between">
          <view class="flex flex-col flex-1">
            <slot>
              <tm-text
                :follow-dark="true"
                :color="_disable ? _disableColor : _fontColor"
                :font-size="36"
                _class="text-weight-b"
                :label="_rightDetail.title"
              ></tm-text>
              <tm-text
                :follow-dark="true"
                _class="opacity-7"
                :color="_disable ? _disableColor : _fontColor"
                :font-size="24"
                :label="_rightDetail.subtitle"
              ></tm-text>
            </slot>
          </view>
          <view class="flex flex-row flex-row-center-end" style="width: 150rpx">
            <slot name="btn">
              <tm-button
                :disabled="_disable"
                :color="_disable ? _disableColor : props.mainColor"
                :font-color="_disable ? 'grey' : ''"
                :text="props.btnTextMode"
                size="small"
                :width="120"
                :label="_btnLabel"
                @click="emits('click', $event)"
              ></tm-button>
            </slot>
          </view>
        </view>
        <view class="flex flex-col pt-16">
          <view class="flex flex-row flex-between">
            <tm-text
              _class="opacity-7"
              :color="_disable ? _disableColor : _fontColor"
              :font-size="22"
              :label="_rightDetail.time"
            ></tm-text>
            <view
              v-if="props.extra"
              class="flex flex-row flex-row-center-center opacity-7"
              @click="_extraActive = !_extraActive"
            >
              <tm-text
                :user-interaction-enabled="false"
                :color="_disable ? _disableColor : _fontColor"
                _class="pr-10"
                :font-size="22"
                :label="_moreText"
              ></tm-text>
              <tm-icon
                :user-interaction-enabled="false"
                :color="_disable ? _disableColor : _fontColor"
                :font-size="20"
                :name="!_extraActive ? 'tmicon-angle-down' : 'tmicon-angle-up'"
              ></tm-icon>
            </view>
          </view>
          <view v-if="props.extra && _extraActive" class="flex flex-row flex-row-top-start">
            <view class="flex-1">
              <view style="height: 12px"></view>
              <slot name="extra"></slot>
            </view>
          </view>
        </view>
      </view>
    </tm-sheet>
  </view>
</template>

<script lang="ts" setup>
/**
 * 优惠卷
 */
import tmSheet from '../tm-sheet/tm-sheet.vue'
import tmAvatar from '../tm-avatar/tm-avatar.vue'
import { surplice, rightSurplice } from './interface'
import tmIcon from '../tm-icon/tm-icon.vue'
import tmText from '../tm-text/tm-text.vue'
import tmButton from '../tm-button/tm-button.vue'
import { custom_props } from '../../tool/lib/minxs'
import { computed, PropType, ref } from 'vue'
import { useTmpiniaStore } from '../../tool/lib/tmpinia'
const store = useTmpiniaStore()
const emits = defineEmits<{
  (e: 'click'): void
}>()
const props = defineProps({
  ...custom_props,
  margin: {
    type: Array as PropType<Array<number>>,
    default: () => [32, 12],
  },
  transprent: {
    type: Boolean,
    default: false,
  },
  text: {
    type: Boolean,
    default: false,
  },
  color: {
    type: String,
    default: 'white',
  },
  fontColor: {
    type: String,
    default: 'black',
  },
  priceDetail: {
    type: Object as PropType<surplice>,
    default: () => {
      return {
        price: 100,
        suffix: '元',
        prefix: '',
        subtext: '满减券',
      }
    },
  },
  rightDetail: {
    type: Object as PropType<rightSurplice>,
    default: () => {
      return {
        title: '券的标题',
        subtitle: '券的小标题',
        time: '有效期:2022-6-3-2022-7-3',
      }
    },
  },
  shadow: {
    type: Number,
    default: 0,
  },
  round: {
    type: Number,
    default: 3,
  },
  border: {
    type: Number,
    default: 0,
  },
  //优惠券左边是金额文本模式还是图片模式，默认为空，即金额文本模式。
  thumb: {
    type: String,
    default: '',
  },
  //是否显示左边金额或者头像。
  showRight: {
    type: Boolean,
    default: true,
  },
  //是否显示额外的详情内容。
  extra: {
    type: Boolean,
    default: false,
  },
  //额外内容初始打开状态。
  extraActive: {
    type: Boolean,
    default: false,
  },
  moreText: {
    type: String,
    default: '规则详情',
  },
  //强调色，金额 和 按钮的主题色
  mainColor: {
    type: String,
    default: 'red',
  },
  btnTextMode: {
    type: Boolean,
    default: false,
  },
  btnLabel: {
    type: String,
    default: '立即使用',
  },
  //是否禁用，等于已使用。
  disable: {
    type: Boolean,
    default: false,
  },
  disableColor: {
    type: String,
    default: 'grey-1',
  },
  disableBgColor: {
    type: String,
    default: 'grey-3',
  },
})

const _priceDetail = computed(() => props.priceDetail)
const _rightDetail = computed(() => props.rightDetail)
const _thumb = computed(() => props.thumb)
const _extraActive = ref(props.extraActive)
const _moreText = computed(() => props.moreText)
const _btnLabel = computed(() => props.btnLabel)
const _disable = computed(() => props.disable)
const _disableColor = computed(() => props.disableColor)
const _disableBgColor = computed(() => props.disableBgColor)
const _isDark = computed(() => store.tmStore.dark)
const _fontColor = computed(() => {
  if (store.tmStore.dark && props.fontColor !== '' && (props.fontColor == 'black' || props.fontColor == 'white')) {
    return 'white'
  }
  return props.fontColor
})
</script>

<style></style>
